<template>
    <div id="app" >
        <div  :class="index==0?`Color`:``" @click="changeIndex(0)" >
                <p class="iconfont icon-shouye"></p>
                <span>首页</span>     
        </div>
        <div  @click="ALL(1)"   :class="index==1?`Color`:``"  >
                <p class="iconfont icon-xianchang">
                    
                </p>
                <span>全部</span>     
        </div>
        <div  @click="SCENE(2)"   :class="index==2?`Color`:``">
           
                <p class="iconfont icon-quanbu">
                
                </p>
                <span>现场</span>    
           
        </div>

        
        <div   @click="WALLET(3)"  :class="index==3?`Color`:``" >
            
                <p class="iconfont icon-qianbao"></p>
                <span>票夹</span>   
           
        </div>
        <div  :class="index==4?`Color`:``"   @click="changeIndex(4)" >
            <p class="iconfont icon-biaoqiankuozhan_wode-205"></p>
            <span>我的</span>     
        </div>

    </div>
</template>

<script>

import {mapState}  from "vuex"
export default {
    neme: "Tail",
    data(){
        return{
            Color:"red",
            // index:0
        }

    },

   computed:{
        ...mapState(["index"])
   },

  methods:{
      //编程式跳转
      SCENE(dex){
        this.$store.commit("changeIndex",dex)

     this.$router.push({ path: 'SCENE'})
        // this.$router.push("SCENE")
      },
      ALL(dex){
        this.$store.commit("changeIndex",dex)
     this.$router.push({ path: '/'})
      },
    WALLET(dex){ 
        this.$store.commit("changeIndex",dex)
     this.$router.push({ path: 'WALLET'})
      },

    changeIndex(dex){
      
        this.$store.commit("changeIndex",dex)
       
    // console.log(this.index)
    //         console.log(this.$store.state.index)
    },
  
  }

};
</script>

<style scoped>
#app {
  width: 100%;
  height: 0.5rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  /* background-color: pink; */
}
#app div p {
  /* width: 100%; */
  font-size: 0.25rem;
}

.Color{
    color: hotpink;
}
/* #app div{
    display: flex;
    /* flex-direction: column; */
/* justify-content: space-around; */
</style>
